<template>
	<view class="bgWhite plr-24 pt-20 pb-40 radius-16">
		
		<view class="">
			<view class="listClass">
				
				<view v-for="(item, index) in dataInfo.recommend" :key="index" @click.stop="handleItem"
					class="itemClass pointer relative radius-16 hidden">
					<view class="flex"
						@click="addOpen(`/pages/mine/veinManDetails?flag=hot1&user=`  + item.id)">
						<!-- hot1 hot2 -->
						<uv-image
							:src="item.imgUrl ? item.imgUrl: item.synthesisImg"
							width="340rpx" height="420rpx"></uv-image>
					</view>
					<view class="bgMinor5 flex pd-16">
						<view class="flex flex-1">
						<uv-image v-if="dataInfo.name == 1 ||dataInfo.name == 5" :src="item.avatar"
							width="32rpx" height="32rpx" shape="circle"></uv-image>
							<view v-if="dataInfo.name == 1||dataInfo.name ==5" class="size-15 ml-16 color-black3 line-hiding-1 flex-1">
								Maverick</view>
						</view>
						<!--  推荐  热门展示 -->
						<view class="flex" v-if="dataInfo.name == 4 ||dataInfo.name ==5">
							<!-- mode="scaleToFill" -->
							<!-- <uv-image v-if="index === 0" @click="addOpen(`/pages/homepage/customization`)"
								src="/static/images/shiyongtongkuan1.png" width="98rpx" height="32rpx"
								mode="scaleToFill"></uv-image>
							<uv-image v-else @click="addOpen('/pages/homepage/customization')"
								src="/static/images/shiyongtongkuan.png" width="98rpx" height="32rpx"
								mode="scaleToFill"></uv-image> -->
							<uv-image @click="addOpen(`/pages/homepage/customization?id=` + item.id )"
								src="/static/images/shiyongtongkuan1.png" width="98rpx" height="32rpx"
								mode="scaleToFill"></uv-image>
						</view>
						<!--  我的  库  收藏 -->
						<view class="flex" v-if="dataInfo.name == 1 ||dataInfo.name == 2 ||dataInfo.name == 3  ">
							<!-- mode="scaleToFill" -->
							<!-- <uv-image v-if="index === 0" @click="addOpen(`/pages/homepage/customization`)"
								src="/static/images/shiyongtongkuan1.png" width="98rpx" height="32rpx"
								mode="scaleToFill"></uv-image>
							<uv-image v-else @click="addOpen('/pages/homepage/customization')"
								src="/static/images/shiyongtongkuan.png" width="98rpx" height="32rpx"
								mode="scaleToFill"></uv-image> -->
							<uv-image @click="Returntoupperlevel(item)" src="/static/images/shiyongtongkuan1.png"
								width="98rpx" height="32rpx" mode="scaleToFill"></uv-image>
						</view>
					</view>
				</view>
			</view>
			<view class=" mt-40" v-if="  dataInfo.recommend.length== 0 "
				style="width: 100%;">
				<view
					style="font-size: 30rpx;width: 100%;text-align: center;  color: rgb(204, 204, 204);height: 25vh;display: flex;align-items: center;justify-content: center;width: 100%;">
					暂 无 数 据</view>
			</view>
			<view v-if="!dataInfo.hasMoreData"
				style="font-size: 30rpx;width: 100%;text-align: center;  color: rgb(204, 204, 204);height: 25vh;display: flex;align-items: center;justify-content: center;width: 100%;">
				没有更多数据了</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive } from 'vue';
	import { baseURL } from '@/utils/config.ts';
	import { getWindowHeight } from '@/pages/util/getHeight';
	import { onLoad, onReachBottom, onShow } from '@dcloudio/uni-app';
	import { addOpen, loggedIn, addOpenTab } from '@/pages/util/hooks';
	import useLoginStore from '@/pinia-store/userInfoStore';
	import { get, post } from '@/utils/request';

	const { name } = withDefaults(
		defineProps<{
			name : String;
			// info: Array<T>;
		}>(),
		{
			name: () => '',
			// info: () => null // 复杂数据类型使用函数返回的方式
		}
	);

	const useLogin = useLoginStore();
	// console.log('useLoginuseLogin',useLogin);
	/** @name 数据 */
	const dataInfo = reactive({
		username: '',
		password: '',
		captcha: '',
		title: '初始标题',
		name: 1,
		hasMoreData: true,
		isLoading: false,
		currentPage: 1,
		list: [],
		recommend: [],
		total: 0,
		pages: 0,
		pageNo: 1,
		msg: '',

	});
	const listFun = async (val) => {
		// 热门展示
		try {
			const response = await get<{
				pageNo : Number,
				pageSize : Number,
				type : Number
			}>('customized/getPopularList/', { pageNo: dataInfo.pageNo, pageSize: 10, type: 0 });
			if (response.code == 200) {
				dataInfo.pages = response.result.pages
				dataInfo.total = response.result.total
				dataInfo.recommend = [...dataInfo.recommend, ...response.result.records]
			}

		} catch (error) {
			console.error(error);
		}
	};
	const recommendFun = async () => {
		// 推荐

		try {
			const response = await get<{
				pageNo : Number,
				pageSize : Number,
				type : Number
			}>('material/getList', { pageNo: dataInfo.pageNo, pageSize: 10, type: 0 });
			if (response.code == 200) {
				dataInfo.pages = response.result.pages
				dataInfo.total = response.result.total
				dataInfo.recommend = [...dataInfo.recommend, ...response.result.records]
			}
		} catch (error) {
			console.error(error);
		}
	};
	function modifyImgUrls(records) {
		return records.map(record => {
			const newRecord = { ...record };
			newRecord.imgUrl =  record.imgUrl;
			return newRecord;
		});
	}
	// 我的
	const maixinggetList = async () => {
		// 推荐

		try {
			const response = await get<{
				pageNo : Number,
				pageSize : Number,
				type : Number
			}>('maixing/getList', { pageNo: dataInfo.pageNo, pageSize: 10, type: 1 });
			if (response.code == 200) {

				dataInfo.pages = response.result.pages
				dataInfo.total = response.result.total
				dataInfo.recommend = [...dataInfo.recommend, ...response.result.records]

				dataInfo.recommend = modifyImgUrls(dataInfo.recommend)
			}

		} catch (error) {
			console.error(error);
		}
	};
	// 库
	const keList = async () => {
		// 推荐
	
		try {
			const response = await get<{
				pageNo : Number,
				pageSize : Number,
				type : Number
			}>('/material/getList', { pageNo: dataInfo.pageNo, pageSize: 10, type: 1 });
			if (response.code == 200) {
	
				dataInfo.pages = response.result.pages
				dataInfo.total = response.result.total
				dataInfo.recommend = [...dataInfo.recommend, ...response.result.records]
	
				dataInfo.recommend = modifyImgUrls(dataInfo.recommend)
			}
	
		} catch (error) {
			console.error(error);
		}
	};

	// 页面滚动到底部时触发
	onReachBottom(() => {
		if (!dataInfo.isLoading && dataInfo.hasMoreData) {
			console.log(dataInfo.pageNo + '----' + dataInfo.pages)

			if (dataInfo.pageNo < dataInfo.pages) {
				dataInfo.pageNo++;
				if (dataInfo.name == 5) {
					listFun('1')
				}
				if (dataInfo.name == 4) {
					recommendFun()
				} if (dataInfo.name == 1) {
					maixinggetList()
				} if (dataInfo.name == 2) {
					
					keList()
				} if (dataInfo.name == 3) {
					maixinggetList()
				}
			} else {
				dataInfo.hasMoreData = false
				setTimeout(() => {
					dataInfo.hasMoreData = true
				}, 800)
			}

			// this.fetchData();
		}
	})
	onShow(() => {
		console.log('333')
	})
	onLoad((options : any) => {
		console.log('options')
		console.log((options))
		dataInfo.msg = options.msg

		uni.setNavigationBarTitle({
			title: options.name == 1 ? "我的" : options.name == 2 ? "库" : options.name == 3 ? "收藏" : options.name == 4 ? "推荐" : options.name == 5 ? "热门展示" : name == '5' ? "广场" : ''
		});
		dataInfo.recommend = []
		dataInfo.name = name == '5' ? 5 : options.name

		// name == '5 广场热门
		if (dataInfo.name == 5 || name == '5') {
			listFun('1')
		}
		if (dataInfo.name == 4) {
			recommendFun()
		} if (dataInfo.name == 1) {
			maixinggetList()
		} if (dataInfo.name == 2) {
		    keList()
		} if (dataInfo.name == 3) {
			maixinggetList()
		}
	})


	const Returntoupperlevel = async (item) => {
		// 推荐

		try {
			if (dataInfo.msg == '1') {
				console.log("左")
				console.log(item.imgUrl)
			} else {
				console.log("右")
				console.log(item.imgUrl)
			}

			const pages = getCurrentPages();
			const prevPage = pages[pages.length - 2];

			if (prevPage) {
				console.log('0000000000000000000000')
				console.log(dataInfo.msg)
				// 调用上一个页面的方法，传递 imgUrl
				if (prevPage.$vm) {
					prevPage.$vm.setImageUrl(item.imgUrl, dataInfo.msg);
				}
			}

			// 返回上一个页面
			uni.navigateBack({
				delta: 1
			});


		} catch (error) {
			console.error(error);
		}
	};
	/** @name xxx */
	function getUserInfo() { }

	/** @name 热门的选中事件 */
	async function handleItem() { }
</script>

<style scoped lang="scss">
	// :deep(.checklist-box) {
	// 	//  模版
	// }
	.listClass {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		/* 分为三列，每列宽度相等 */
		gap: 24rpx;
	}
</style>